<template>
	<view class="blind_box_deta">
		<uv-navbar leftIcon="arrow-leftward" leftIconColor="#FFF" placeholder autoBack bgColor="#161714"
			@rightClick="router('/pages/market/blind_box_record')">
			<!-- <template v-slot:right>
				<view class="right_slot">
					<image src="@/static/images/f1.png"></image>
					<view>开盒记录</view>
				</view>
			</template> -->
		</uv-navbar>
		<!-- <view class="header_cover">
			<image :src="data_info.cover"></image>
		</view> -->
		<image :src="data_info.cover" mode="widthFix" class="cover"></image>
		<!-- <uv-swiper :list="list" radius="0" height="150"></uv-swiper> -->
		<view class="content">
			<view class="header">{{data_info.name}}</view>
			<view class="info_view">
				<view class="item">
					<view class="key">价格</view>
					<view class="cell">
						<text class="unit">$</text>
						<text class="value">{{order_info.price}}</text>
					</view>
				</view>
				<view class="item">
					<view class="key">发行总量</view>
					<view class="cell">
						<text class="value">{{data_info.stock}}</text>
						<text class="unit">份</text>
					</view>
				</view>

				<view class="item">
					<view class="key">未开启数量</view>
					<view class="cell">
						<text class="value">{{not_open}}</text>
						<text class="unit">份</text>
					</view>
				</view>
			</view>
			<view class="tabs">
				<view class="item" :class="active==1?'active':''" @click="active=1">盲盒物品</view>
				<view class="item" :class="active==2?'active':''" @click="active=2">盲盒介绍</view>
			</view>
			<view class="list" v-if="active==1">
				<uv-waterfall ref="waterfall" v-model="data_info.blindbox" :add-time="10" :column-gap="10"
					@changeList="changeList">
					<template v-slot:list1>
						<view>
							<view class="item" v-for="item in data_list.list1">
								<image :src="item.product.cover" mode="widthFix"></image>
								<view class="name">{{item.product.name}}</view>
							</view>
						</view>
					</template>
					<template v-slot:list2>
						<view>
							<view class="item" v-for="item in data_list.list2">
								<image :src="item.product.cover" mode="widthFix"></image>
								<view class="name">{{item.product.name}}</view>
							</view>
						</view>
					</template>
				</uv-waterfall>
			</view>
			<view class="parse_view" v-else>
				<uv-parse :content="data_info.content"></uv-parse>
			</view>
		</view>
		<view class="footer">
			<view class="left">
				<text class="unit">一口价$</text>
				<text class="value">{{order_info.price}}</text>
			</view>
			<view class="btn" @click="buy">购买</view>
		</view>
		<uv-popup ref="popup" round="10" bgColor="none" mode="bottom">
			<CodeInput :data="order_info" @close="popup.close" @submit="submit" />
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		orderInfo,
		orderSellBuy
	} from "@/request/api";
	import CodeInput from "@/components/market/CodeInput.vue"
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		shallowRef
	} from 'vue';
	import useBase from "@/hooks/useBase.js";
	const {
		router
	} = useBase();
	const emit = defineEmits(["close", "submit"]);
	const value = ref(5);

	const popup = shallowRef();
	const buy = () => popup.value.open();

	const submit = async (value) => {
		await orderSellBuy({
			id,
			pay_password: value
		})
		popup.value.close();
		// router('/pages/common/market_order_result')
	};

	const active = ref(1);

	const data_info = ref({});
	const order_info = ref({});
	const not_open = ref("");
	
	let id = "";
	onLoad(async (options) => {
		id = options.id;
		let {
			info,
			product,
			not_open:not_open_val
		} = await orderInfo({
			id
		});
		order_info.value = info;
		data_info.value = product;
		not_open.value=not_open_val;
	});

	const data_list = reactive({
		list1: [],
		list2: []
	});
	const waterfall = shallowRef();
	const changeList = (e) => data_list[e.name].push(e.value);

	onUnload(() => {
		waterfall.value.clear();
		data_list.list1 = [];
		data_list.list2 = [];
	});
</script>

<style scoped lang="scss">
	$footerHeight: 108rpx;

	.blind_box_deta {
		.right_slot {
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 20px;
				height: 20px;
			}

			view {
				color: #FFFFFF;
				font-size: 12px;
				font-weight: 400;
				padding-top: 10rpx;
				box-sizing: border-box;
			}
		}

		.cover {
			width: 100%;
		}

		.content {
			width: 100%;
			min-height: 1624rpx;
			padding: 0 30rpx $footerHeight;
			box-sizing: border-box;
			background: url(@/static/images/bg1.png) no-repeat;
			background-size: 100% 100%;

			.header {
				text-align: center;
				color: #DDF247;
				font-size: 40rpx;
				font-weight: 800;
				padding: 36rpx 0 30rpx;
				box-sizing: border-box;
			}

			.info_view {
				border-radius: 10rpx;
				padding: 0rpx 40rpx 30rpx;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.1);
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 50%;
					padding-top: 30rpx;
					box-sizing: border-box;

					.key {
						color: #808080;
						font-size: 26rpx;
					}

					.cell {
						padding-top: 20rpx;
						box-sizing: border-box;

						.unit {
							color: #FFFFFF;
							font-size: 32rpx;
							font-weight: 400;
						}

						.value {
							color: #FFFFFF;
							font-size: 40rpx;
							font-family: DINPro;
						}
					}
				}
			}

			.tabs {
				padding: 68rpx 10rpx 40rpx;
				box-sizing: border-box;
				display: flex;
				position: relative;

				&::after {
					content: "";
					width: 100vw;
					height: 2rpx;
					background: #333333;
					position: absolute;
					left: -30rpx;
					bottom: 0;
					z-index: 2;
				}

				.item {
					color: #808080;
					font-size: 32rpx;
					margin-right: 70rpx;

					&:last-child {
						margin-right: 0;
					}

					&.active {
						color: #DDF247;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
			}

			.list {
				padding-top: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;

				.item {
					width: 335rpx;
					margin-bottom: 30rpx;
					position: relative;

					image {
						width: 100%;
					}

					.name {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						color: #EEEEEE;
						font-size: 24rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						padding: 0 32rpx;
						box-sizing: border-box;
						position: absolute;
						left: 0;
						bottom: 0;
						z-index: 2;
					}
				}
			}

			.parse_view {
				color: #999999;
				font-size: 26rpx;
			}
		}

		.footer {
			width: 100%;
			height: $footerHeight;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #111111;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2;

			.left {
				color: #DDF247;

				.unit {
					font-size: 40rpx;
				}

				.value {
					font-size: 50rpx;
					font-family: DINPro;
				}
			}

			.btn {
				width: 200rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #111111;
				font-size: 28rpx;
				font-weight: bold;
				border-radius: 20rpx;
				background: #DDF247;

				&.end {
					color: #111111;
					background: #CCCCCC;
				}
			}
		}
	}
</style>